<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
.span_on{margin:0px;padding:3px;display:inline-block;border:1px solid #333;border-bottom: 1px solid white;}
.span_out{margin:0px;padding:3px;display:inline-block;border:1px solid #333;background:#ddd;}
.div_on{width:298px;height:198px;background:#eee;border:1px solid #555;}
.div_out{display:none;}
	</style>
	<script>
function showMe(a) {
	var arr=['span0','span1','span2','span3'];
	for (var i = 0; i < arr.length; i++) {
		document.getElementById(arr[i]).className = 'span_out';
		document.getElementById('div'+i).className = 'div_out';
	}
	document.getElementById(arr[a]).className = 'span_on';
	document.getElementById('div'+a).className = 'div_on';
}
function deleteDiv(id) {
	if (window.confirm('你确定要删除吗')) {
		var obj = document.getElementById(id);
		obj.parentNode.removeChild(obj);
	}
}


	</script>
</head>
<body>
	<div style="width:200px;height:26px;">
		<span id="span0" class="span_on" onmouseover="showMe(0)">哈哈</span>
		<span id="span1" class="span_out" onmouseover="showMe(1)">嘿嘿</span>
		<span id="span2" class="span_out" onmouseover="showMe(2)">呵呵</span>
		<span id="span3" class="span_out" onmouseover="showMe(3)">吼吼</span>
	</div>
	<div style="height:300px;width:200px;">
		<div id="div0" class="div_on">0。0<a href="javascript:deleteDiv('div0')">删除</a></div>
		<div id="div1" class="div_out">^_^</div>
		<div id="div2" class="div_out">@_@</div>
		<div id="div3" class="div_out">@3@</div>
	</div>
</body>
</html>